import React, { useState, useEffect } from "react";
import { useTranslation } from "react-i18next";
import Toolbar from "@/components/ViewComponents/Toolbar";
import DetailDrawer_Form from "./components/DetailDrawer";
import { Tooltip } from "antd";
import { useDrawer } from "@/components/Drawer";
import { get_pagebygrpId } from "@/api/EmergencyDictionary";
import { BasicForm, useForm } from "@/components/Form";
import "./index.less";
// import { Radio, Space } from "antd";
import { Radio } from "antd";
import { BasicTable, useTable, FormSchema, BasicColumn } from "@/components/Table/index";
import type { RadioChangeEvent } from "antd";
export default function health_check() {
	const { t } = useTranslation();
	let [userList, setUserList] = useState([]);
	const [checkVal, setCheckVal] = useState("全部");
	let btnList = [
		{
			key: "",
			text: ""
		}
		// {
		// 	key: "save",
		// 	text: "save"
		// },
		// {
		// 	key: "end",
		// 	text: "end"
		// }
	];
	// 表单
	const TopFormSchema: FormSchema[] = [
		{
			label: t("felix_ui.patient_ID"),
			field: "patientId",
			component: "Input",
			colProps: { span: 6 }
		},
		{
			label: t("felix_ui.ReferralID"),
			field: "transId",
			component: "Input",
			colProps: { span: 6 }
		},
		{
			label: t("felix_ui.exam_dtime"),
			field: "examDate",
			component: "DatePicker",
			colProps: { span: 6 }
		},
		{
			label: t("felix_ui.status"),
			field: "status",
			component: "Select",
			componentProps: {
				options: [
					{ label: "待检查", value: "0" },
					{ label: "已检查", value: "1" },
					{ label: "已取消", value: "2" }
				]
			},
			colProps: { span: 6 }
		}
	];
	const columns: BasicColumn[] = [
		{
			title: t("felix_ui.sq_numb"),
			dataIndex: "index",
			width: 100,
			render: (text, record, index) => index * 1 + 1 // 设置序号
		},
		{
			title: t("felix_ui.patient_ID"),
			dataIndex: "patientId"
		},
		{
			title: t("felix_ui.full_name"),
			dataIndex: "name",
			render: (text, record) => (
				<a
					onClick={() => {
						openDrawer(true, {
							patientId: record.patientId,
							reload
						});
					}}
				>
					<Tooltip placement="left" title="配置患者健康状态" color="blue">
						{text}
					</Tooltip>
				</a>
			)
		},
		{
			title: t("felix_ui.birthday"),
			dataIndex: "birthday"
		},
		{
			title: t("felix_ui.gender"),
			dataIndex: "gender"
		},
		{
			title: t("felix_ui.pat_addr"),
			dataIndex: "pat_addr"
		},
		{
			title: t("felix_ui.pat_unit"),
			dataIndex: "pat_unit"
		}
	];
	const checkOptions = [
		{ label: t("felix_ui.all"), value: "全部" },
		{ label: t("felix_ui.entered"), value: "已输入" },
		{ label: t("felix_ui.not_entered"), value: "未输入" }
	];

	const checkChange = ({ target: { value } }: RadioChangeEvent) => {
		console.log("radio4 checked", value);
		setCheckVal(value);
	};
	const [registerTable, { reload }] = useTable({
		title: <Radio.Group options={checkOptions} onChange={checkChange} value={checkVal} optionType="button" buttonStyle="solid" />,
		columns,
		dataSource: userList,
		bordered: true,
		pagination: true
	});

	const [registerDetailDrawer, { openDrawer }] = useDrawer();
	const [formTopItems, { getFieldsValue }] = useForm({
		labelWidth: 100,
		schemas: TopFormSchema,
		autoSubmitOnEnter: true,
		showActionButtonGroup: true,
		submitFunc: () => {
			getSelectList();
		}
	});
	let getSelectList = async () => {
		let params = await getFieldsValue();
		console.log(params);
		await get_pagebygrpId(params).then(res => {
			let list = res.list.map((item: any) => {
				return {
					...item,
					...item.patients,
					...item.checkupsGroup
				};
			});
			setUserList(list);
		});
	};
	useEffect(() => {
		getSelectList();
	}, []);
	return (
		<div className="page">
			<div className="page-content">
				<div className="block">
					<BasicForm register={formTopItems} labelWrap={true}></BasicForm>
				</div>
				<div className="block mt-2">
					<BasicTable register={registerTable}></BasicTable>
					<DetailDrawer_Form register={registerDetailDrawer}></DetailDrawer_Form>
				</div>
			</div>
			<Toolbar btnList={btnList} />
		</div>
	);
}
